<template>
	<view class="page" style="">
		<nav-bar :disabled="disabled" />
		<view class="search-content">
			<view class="box">
				<p class="p">{{$t('production.AdjustDetail.5q5bi14gpo00')}}<text class="text">{{adjustProductionItem.styleNo}}</text></p>
				<p class="p">{{$t('production.AdjustDetail.5q5bi14gzow0')}}<text class="text">{{adjustProductionItem.billNo}}</text></p>
			</view>
			<view class="box">
				<p class="p">{{$t('production.AdjustDetail.5q5bi14h02o0')}}<text class="text">{{adjustProductionItem.styleName}}</text></p>
				<p class="p">{{$t('production.AdjustDetail.5q5bi14h0ko0')}}<text class="text">{{adjustProductionItem.customerName}}</text></p>
			</view>
			<view class="toAdjust" @click="toAdjust">
				{{$t('production.AdjustDetail.5q5bi14h0ro0')}}
			</view>
		</view>	
		<view class="content">
			<view class="left-list">
				<view class="left-item" :class="leftActiveId === item.id? 'leftActive': 'leftNormal'" v-for="item in leftData" :key="item.id" @click="leftActive(item)">
					<view class="header">
						<view class="index">
							{{ item.stationNo < 10 ? `0${item.stationNo}` : item.stationNo }}
							{{ `${item.sewingUserName} ` }}
						</view>
						<view class="processes">
							<text>{{$t('production.AdjustDetail.5q5bi14h13c0')}}</text>
							<view class="processes-list">
								<view class="processes-item" v-for="left in item.processesDtos" :key="left.id">
									{{ left.processNo < 10 ? `0${left.processNo}` : left.processNo }}
								</view>
							</view>
						</view>
						<view class="time">
							{{sumTime(item)}}s
						</view>
					</view>
					<view class="lists">
						<view class="list-item" v-for="pr in item.processesDtos" :key="pr.id">
							<view class="index">
								{{$t('production.AdjustDetail.5q5bi14h13c0')}}{{pr.processNo}}
							</view>
							<view class="info">
								<text>{{pr.processName}}</text>
							</view>
							<view class="time">
								<text>{{pr.workingHours}}s</text>
							</view>
							<view class="del" @click="deleteItem(item, pr)">
								<image class="del" src="../../../static/img/del.png" mode=""></image>
							</view>
						</view>
					</view>
			  </view>
					</view>
					<view class="right-list">
						<u-checkbox-group  v-model="checkboxValue1" placement="column" @change="checkboxChange">
								<label v-for="item in rightData" class="check-content" :key="item.id">
								<view class="checkbox">
									<u-checkbox  :checked="item.checked" :name="item.id" style="margin-left: 10rpx;" />
								</view>
								<view class="info-item" :class="hasRightId(item) || usedProcesses.includes(item.id) ? 'rightActive': 'rightNormal'">
									<view class="index">
										{{$t('production.AdjustDetail.5q5bi14h13c0')}}{{item.processNo}}
									</view>
									<view class="info">
										<text>{{item.processName}}</text>
									</view>
									<view class="time" @click="handlerShowModal(item)">
										<text>{{`${item.workingHours}s`}}</text>
										<text>{{item.croppingTimes}}{{$t('production.AdjustDetail.5qo7pgw91vk0')}}</text>
										<image class="edit" src="../../../static/img/edit.png" mode=""></image>
									</view>
								</view>
								</label>
						</u-checkbox-group>
					</view>
				</view>
		<view class="footer">
			<u-button class="btn" @click="backTo">
				<text class="text">{{ $t('common.return') }}</text>
			</u-button>
			<u-button type="primary" class="btn2" @click="submit">
				<text class="text">{{ $t('common.submit') }}</text>
			</u-button>
		</view>
		<u-modal :show="showModal" width="600px" :showConfirmButton="false" :closeOnClickOverlay="true" @close="showModal=false">
			<view class="header">
				<p  class="title">{{$t('production.AdjustDetail.5q5bi14h13c0')}}{{modalData.processNo}}</p>
			</view>
			<view class="modal-content">
				<view class="p-name">{{modalData.processName}}</view>
				<view class="table">
					<view class="thead">
						<view class="item">
							<text class="text">{{$t('production.AdjustDetail.5qo7pgw8yu00')}}</text>
						</view>
						<view class="item">
							<text class="text">{{$t('production.AdjustDetail.5qo7pgw91es0')}}</text>
						</view>
					</view>
					<view class="tbody">
						<view class="item">
							<u-input class="input" type="number" v-model="modalData.workingHours"></u-input>
							<view class="text">s</view>
						</view>
						<view class="item">
							<u-input class="input" type="number" v-model="modalData.croppingTimes"></u-input>
							<view class="text">{{$t('production.AdjustDetail.5qo7pgw91vk0')}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-btn">
				<u-button size="mini" class="btn1" @click="back">{{$t('production.AdjustContent.5q5bj3756a00')}}</u-button>
				<u-button size="mini" class="btn2" type="primary" @click="submitModal">{{$t('production.AdjustContent.5q5bj3756ec0')}}</u-button>
			</view>
		</u-modal>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import navBar from "@/components/nav-portrait/index.vue"
	import {adjustProductionLine, getProcesses, updateSewingHistory, updateProcessesSingle} from "../../../api/adjust.js"
	import { deepClone } from '../../../utils/deepClone.js'
	export default {
		components:{navBar},
		data() {
			return {
				checkboxValue1:[],
				leftData:[],
				loading:false,
				showModal:false,
				leftActiveId:'',
				rightData:[],
				modalData:{},
				disabled:false,
				rightDataMap:{},
				hours:0,
				times: 0,
				adjustProductionItem:{},
				usedProcesses: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url: `${url}`
				})
			},
			handlerShowModal(item) {
				this.showModal = true
				this.modalData = deepClone(item)
			},
			sumTime(item) {
				if(!item.processesDtos.length) return 0
				let total = item.processesDtos.reduce((acc, cur) => {
					return acc + parseFloat(cur.workingHours, 10)
				}, 0)
				return total.toFixed(2)
			},
			back() {
				this.showModal = false
			},
			submitModal() {
				if(!this.modalData.workingHours || !this.modalData.croppingTimes) {
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustDetail.5qo7pgw923o0')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
					return
				}
				let reg1 = /^\d+(\.\d{1,2})?$/
				if(!reg1.test(this.modalData.workingHours)) {
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustDetail.5qo7pgw92a80')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
					return
				}
				let reg2 = /^[1-9]\d*0?$/
				if(!reg2.test(this.modalData.croppingTimes)) {
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustDetail.5qo7pgw92hg0')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
					return
				}
				updateProcessesSingle(this.modalData).then(res => {
					// uni.$u.toast(this.$t('production.AdjustDetail.5qo7pgw92pk0'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustDetail.5qo7pgw92pk0')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
					this.getProcessesList()
					this.back()
				})
			},
			deleteItem(item, pr) {
				let index = item.processesDtos.findIndex(item => item.id === pr.id)
				item.processesDtos.splice(index, 1)
			},
			hasRightId(item) {
				// item.id 右边当前选中id
				let current = this.leftData.find(item => item.id === this.leftActiveId)
				if(!current) return false
				return current.processesDtos.map(m => m.id).includes(item.id) > 0
			},
			leftActive(item) {
				this.checkboxValue1 = item.processesDtos.map(item => item.id)
				// this.rightActiveId = []
				this.leftActiveId = item.id
			},
			toAdjust() {
				uni.navigateBack()
			},
			backTo() {
				uni.navigateBack()
			},
			submit() {
				this.loading = true
				updateSewingHistory(this.leftData).then(res => {
					this.loading = false
					if(res.code !== 0) {
						return
					}
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('production.AdjustDetail.5q5bi14h1cg0')}</p>`,{
									type: "richtext",
									duration: "long",
									verticalAlign: "middle"
								}
								);
					uni.navigateBack()
				}).catch(err => {
					console.log(err);
				})
			},
			checkboxChange(n) {
				// if(!this.leftActiveId) {
				// 	this.checkboxValue1 = []
				// 	uni.$u.toast('请先选择工序')
				// 	return
				// }
				this.leftData.forEach(item => {
					if(item.id === this.leftActiveId) {
						//处理右边数据
						item.processesDtos = []
						n.forEach(m => {
							let obj = this.rightData.find(r => r.id === m)
							// let no = this.rightData.findIndex(r => r.id === m)
							// obj.no = no + 1
							item.processesDtos.push(obj)
						})
					}
				})
				this.$store.commit('SET_SEWING_LIST', this.leftData)
			},
			getList() {
	
				this.leftData = this.$store.state.sewingStationHistoryList
				this.leftData = this.leftData.sort((a, b) => a.stationNo - b.stationNo)
				this.leftData.forEach(item => {
					if(!item.processesDtos) item.processesDtos = []
				})
				// this.$store.commit('SET_SEWING_LIST', this.leftData)
				console.log(this.leftData)
			},
			getProcessesList() {
				getProcesses({sewingId:this.sewingId,productionId: this.productionId}).then(res => {
					if(res.code!==0){
						return
					}
					this.rightData = res.data	
				})
			}
		},
		onshow() {
			this.getList()

			console.log(this.leftData, 'leftData');
		},
		onLoad(option) {
			this.disabled = !!option.productionId
			this.productionId = option.productionId
			this.sewingId = option.sewingId
			this.adjustProductionItem = this.$store.state.adjustProductionItem
			this.getList()
			this.getProcessesList()
		},
		watch: {
			leftData: {
				handler(data) {
					this.usedProcesses = data.reduce((prev, item) => {
						const r = item.processesDtos.map(i => i.id)
						prev.push(...r)
						return prev
					}, [])
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page{
		position: fixed;
		height: 100vh;
		width: 100vw;
		// font-size: 1.2rem;
		background: #F3F3F3;
		overflow: hidden;
		// overflow-y: hidden;
		// overflow-x: auto;
		// box-sizing: border-box;
		flex-grow: 1;
		// overflow-y:auto; 
		.search-content {
			height: 136rpx;
			opacity: 1;
			width: 100%;
			background: #FFFFFF;
			
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			position: relative;
			.box {
				font-family: AlibabaPuHuiTi;
				font-size: 18rpx;
				font-weight: 500;
				line-height: 38rpx;
				letter-spacing: 0px;
				width: 35%;
				.p {
					margin: 18rpx;
					color: #333333;
					width: 240rpx;
					overflow: hidden;
					text-overflow:ellipsis; 
					white-space: nowrap
				}
				.text {
					color: #585858;
				}
			}
			.toAdjust {
				font-family: AlibabaPuHuiTi;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 33rpx;
				text-align: center;
				// letter-spacing: 0.22em;
				color: #3E8FF7;
				position: absolute;
				right: 5%;
				top: 38%;
			}
		}
		::v-deep .u-input {
				height: 50rpx;
				width: 260rpx;
			}
		.content {
			display: flex;
			.left-list {
				flex: 1;
				height: calc(100vh - 253rpx);
				overflow-y: auto;
				.leftActive {
					background: #E3F1FA;
				}
				.leftNormal {
					background: #fff;
				}
				.left-item {
					
					margin: 20rpx 20rpx 20rpx 0;
					.header {
						height: 60rpx;
						line-height: 60rpx;
						display: flex;
						align-items: center;
						.index{
							flex: 0 0 20%;
							text-align: left;
							font-size: 16rpx;
							font-weight: 500;
							line-height: 24rpx;
							text-align: center;
							letter-spacing: 0em;
							
							color: #3E8FF7;
						}
						.processes{
							flex: 0 0 60%;
							font-size: 16rpx;
							font-weight: 500;
							line-height: 24rpx;
							letter-spacing: 0px;
							
							/* 中性色/表头标题正文33 */
							color: #333333;
							display: flex;
							align-items: center;
							.text {
								flex: 0 0 60rpx;
							}
							.processes-list {
								flex: 1;
								.processes-item {
									display: inline-block;
									width: 50rpx;
									height: 24rpx;
									line-height: 24rpx;
									text-align: center;
									border-radius: 2px;
									opacity: 1;
									font-family: AlibabaPuHuiTi;
									font-size: 16rpx;
									font-weight: normal;
									background: #E1FFE4;
									color: #46C253;
									box-sizing: border-box;
									border: 1px solid #46C253;
									margin-left: 10rpx;
								}
							}
						}
						.time{
							flex: 1;
							text-align: right;
							margin-right: 10rpx;
							
						}
					}
					.lists {
						position: relative;
						padding-bottom: 1rpx;
						.list-item:first-child {
							margin-top: 0 !important;
						}
						.list-item {
							display: flex;
							align-items: center;
							background: #FCFCFC;
							margin: 10rpx 10rpx;
							box-sizing: border-box;
							/* 中性色/输入框边框DD */
							border: 1px solid #DDDDDD;
							min-height: 60rpx;
							.index {
								flex: 0 0 60rpx;
								color: #333333;
								text-align: center;
								font-size: 16rpx;
								font-weight: normal;
							}
							.info {
								flex: 0 0 60%;
								word-break: break-all;
								font-family: AlibabaPuHuiTi;
								font-size: 16rpx;
								font-weight: normal;
								line-height: 24rpx;
								letter-spacing: 0px;
								
								/* 中性色/表单输入色66 */
								color: #666666;

							}
							.time {
								flex: 0 0 15%;
								color: #585858;
								font-size: 16rpx;
								text-align: center;
							}
							.del {
								flex: 0 0 15%;
								.del {
									width: 20rpx;
									height: 20rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}
			.right-list {
				flex: 1;
				box-shadow: -3px 0px 10px 0px rgba(0, 0, 0, 0.3);
				background: #fff;
				height: calc(100vh - 253rpx);
				overflow-y: auto;
				width: 100%;
				.check-content {
					display: flex;
					width: 100%;
					align-items: center;
					.checkbox {
						flex: 0 0 10%;
						text-align: center;
					}
					.rightActive {
						background: #E3F1FA;
					}
					.rightNormal {
						background: #FCFCFC;
					}
					.info-item {
						display: flex;
						align-items: center;
						margin: 10rpx 10rpx;
						box-sizing: border-box;
						/* 中性色/输入框边框DD */
						border: 1px solid #DDDDDD;
						flex: 1;
						min-height: 80rpx;
						.index {
							flex: 0 0 60rpx;
							color: #333333;
							text-align: center;
							font-size: 16rpx;
							font-weight: normal;
						}
						.info {
							flex: 0 0 65%;
							word-break: break-all;
							font-family: AlibabaPuHuiTi;
							font-size: 16rpx;
							font-weight: normal;
							line-height: 24rpx;
							letter-spacing: 0px;
							
							/* 中性色/表单输入色66 */
							color: #666666;
						
						}
						.time {
							flex: 0 0 15%;
							color: #585858;
							font-size: 16rpx;
							text-align: center;
							display: flex;
							flex-direction: column;
							align-items: center;
							.edit {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}
		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 53rpx;
			background-color: #FFFFFF;
			line-height: 53rpx;
			color: #000;
			box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			.btn {
				width: 30%;
				margin-left: 2%;
				margin-top: 9rpx;
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #585858;
				}
			}
			.btn2 {
				width: 65%;
				margin-left: 1%;
				margin-top: 9rpx;
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		::v-deep .u-modal__content {
			flex-direction: column;
			.modal-content {
				position: relative;
				/* 中性色/表单输入色66 */
				min-height: 300rpx;
				
				.p-name {
					color: #666666;
					font-size: 18rpx;
					font-weight: normal;
					line-height: 36rpx;
					letter-spacing: 0px;
					min-height: 36rpx;
				}
				.table {
					position: relative;
					// width: 740rpx;
					height: 120rpx;
					border: 1px solid #DDDDDD;
					margin-top: 20rpx;
					// margin-top: 40rpx;
					.thead {
						display: flex;
						background: #DDDDDD;
						font-family: 阿里巴巴普惠体;
						font-size: 20rpx;
						font-weight: bold;
						text-align: center;
						letter-spacing: 0em;
						height: 60rpx;
						line-height: 60rpx;
						/* 中性色/表头标题正文33 */
						color: #333333;
						.item {
							flex: 1;
							text-align: center;
						}
						&:not(:first-child) {
							// border-left: 1px solid #DDDDDD;
						}
					}
					.tbody {
						display: flex;
						
						font-size: 20rpx;
						
						height: 60rpx;
						line-height: 60rpx;
						
						.item {
							flex: 1;
							text-align: center;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							position: relative;
							.input {
								width: 160rpx;
								height: 40rpx;
								position: absolute;
								left: 25rpx;
								top: 10rpx;
							}
							.text {
								position: absolute;
								right: 18rpx;
								bottom: 0rpx;
								font-family: 阿里巴巴普惠体;
								font-size: 18rpx;
								font-weight: normal;
								text-align: center;
								letter-spacing: 0em;
								
								/* 中性色/输入框已输入字 */
								color: #585858;
							}
							&:not(:first-child) {
								border-left: 1px solid #DDDDDD;
							}
						}
						
					}
				}
			}
			.footer-btn {
				    position: absolute;
				    bottom: 0;
				    /* display: flex; */
				    width: 100%;
				    height: 48rpx;
				    opacity: 1;
				    background: #FFFFFF;
					left: 0;
				    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
					// display: flex;
					// align-items: center;
					text-align: right;
					.btn1,.btn2 {
						width: 60rpx;
						display: inline-block;
						height: 32rpx;
						line-height: 32rpx;
						margin-top: 8rpx;
						margin-right: 20rpx;
					}
					.btn1 {
						// margin-right: 20rpx;
					}
					
			}
		}
	}
</style>
